<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script th:inline="javascript" th:fragment="common-config">
    const message = [[${message}]];
    const inMessage = 1;
    var nginx_status = [[${nginx}]];
    const system_config = [[${system_config}]];
</script>
<div th:fragment="component">
    <script type="text/html" id="reset-password-form">
        <div class="layui-form" lay-filter="reset-password-form" id="lay-reset-password-form" style="margin: 15px 40px 15px 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">登录密码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="password" name="password" lay-verify="required|pass" placeholder="登录密码" autocomplete="off" lay-vertype="tips" lay-affix="eye" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-form-mid layui-text-em layui-font-12">8 到 20 位字符，数字、大小写字母、特殊字符，任意三种组合</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline ">
                    <input type="password" name="verifyPassword" lay-verify="required|verifyPass" lay-affix="eye" lay-vertype="tips" placeholder="确认密码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="reset-mobile-form">
        <div class="layui-form" lay-filter="reset-mobile-form" id="lay-reset-mobile-form" style="margin: 15px 40px 15px 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="mobile" lay-verify="required|phone" placeholder="手机号" autocomplete="off" lay-vertype="tips" lay-affix="mobile" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline ">
                    <input type="text" name="mobileCode" lay-verify="required" lay-vertype="tips" placeholder="验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="reset-email-form">
        <div class="layui-form" lay-filter="reset-email-form" id="lay-reset-email-form" style="margin: 15px 40px 15px 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="password" name="email" lay-verify="required|email" placeholder="email" autocomplete="off" lay-vertype="tips" lay-affix="email" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline ">
                    <input type="text" name="emailCode" lay-verify="required" lay-vertype="tips" placeholder="验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
                </div>
            </div>
        </div>
    </script>
</div>
</body>
</html>

<!--


        // 已知数据渲染
        var inst = table.render({
            elem: '#nginx-server-list',
            toolbar: '#toolbarDemo',
            url: system_config.baseServerPath+'/list',
            headers:{
                'AuthToken':top.tools.cookie.token(),
                'Content-Type':'application/json',
            },
            defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips',
                onClick: function (obj) { // 2.9.12+
                    layer.alert('自定义工具栏图标按钮');
                }
            }],
            cols: [
                [
                    {type: 'checkbox', width: 50},
                    {field: 'id', title: 'ID', align: 'center', width: 100},
                    {field: 'system', title: '系统类型', align: 'center', width: 150},
                    {field: 'serverName', title: '服务名称', minWidth: 200},
                    {field: 'startPath', title: '启动路径', minWidth: 200},
                    {field: 'configPath', title: '配置路径', minWidth: 200},
                    {fixed: 'right', title: '操作', align: 'center', width: 300, minWidth: 125, toolbar: '#barDemo'}
                ]
            ],
            data: [
                {
                    id: '001',
                    serverName: 'nginx01'
                },
                {
                    id: '002',
                    serverName: 'nginx02'
                }
            ],
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code == 200 ? 0 : 1, // 解析接口状态
                    "msg": res.message, // 解析提示文本
                    "count": res.result.total, // 解析数据长度
                    "data": res.result.rows // 解析数据列表
                };
            },
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [10, 20, 30],
            limit: 10, // 每页默认显示的数量
            done: function (res, curr, count) {
                $(".layui-table th[data-field=" + 0 + "] .layui-table-cell").html("");
            }
        });
        // 复选框事件
        table.on('checkbox(nginx-server-toolbar)', function (obj) {
            if (obj.dataCache.LAY_CHECKED) {
                table.setRowChecked('nginx-server-list', {
                    type: 'checkbox',
                    index: 'all',
                    checked: false
                });
                table.setRowChecked('nginx-server-list', {
                    type: 'checkbox',
                    index: obj.index,
                    checked: true
                });
            }

        });

        // 触发单元格工具事件
        table.on('tool(nginx-server-toolbar)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            if (obj.event === 'edit') {
                let i = layer.open({
                    title: '编辑服务',
                    type: 2,
                    area: ['50%', '45%'],
                    content: '/service-web/from/' + data.id,
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        // 获取 iframe 的窗口对象
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        top.tools.loading();
                        iframeWin.submitFun(function (msg) {
                            layer.close(loadingId);
                            layer.close(i);
                            if (msg) {
                                layer.msg(msg, {icon: 2});
                            }
                            table.reloadData('nginx-server-list', {
                                where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
                                scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
                            });
                        })
                    },
                });
            } else if (obj.event === 'start') {
                exec({
                    exec: '1',
                    nginx: data
                })
            } else if (obj.event === 'stop') {
                exec({
                    exec: '2',
                    nginx: data
                })
            } else if (obj.event === 'restart') {
                exec({
                    exec: '3',
                    nginx: data
                })
            }
        });

        function post(url, data, success) {
            // 执行提交
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function (res) {
                    success(res)
                },
                error: function (res) {
                    layer.close(loadingId);
                    layer.msg("请求错误", {icon: 2});
                }
            })
        }

        function get(url, success) {
            // 执行提交
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function (res) {
                    success(res)
                },
                error: function (res) {
                    layer.close(loadingId);
                    layer.msg("请求错误", {icon: 2});
                }
            })
        }

        function exec(data) {
            top.tools.loading();
            post("/service-web/api/exec", data, function (res) {
                layer.close(loadingId);
                if (res.code === 200) {
                    location.reload();
                } else {
                    layer.msg("执行失败", {icon: 2});
                }
            })
        }



-->